<template>
  <div class="Learning-index">
    <h3>使用 <code>useMouse</code> 监听鼠标位置变化</h3>
    <codeContainer>
      <template #default>
        <p> 鼠标位置 at: {{ x }}px {{ y }}px</p>
        <p>类型：{{ sourceType }}</p>
        <span class="border padding selectAll">选中文字拖拽</span>
      </template>
      <template #code>
            <pre data-type="js">
              {{ codeFragment["vueUseMouse1"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>使用 UseMouse 组件</h3>
    <codeContainer>
      <template #default>
        <UseMouse v-slot="{ x, y }">
          <p> 鼠标位置 at: {{ x }}px {{ y }}px</p>
        </UseMouse>
      </template>
      <template #code>
            <pre data-type="js">
              {{ codeFragment["vueUseMouse3"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>实现 <code>useMouse</code></h3>
    <ul class="Learning-summary">
      <li>基于
        <router-link :to="{name: 'useEventListener'}">useEventListener</router-link>
      </li>
      <li>处理拖拽时不会触发 mousemove 事件的问题</li>
      <li>兼容移动端和pc端</li>
      <li>组件卸载时自动注销</li>
    </ul>
    <div class="code-source-wrapper" v-highlight>
      <pre data-type="js">
        {{ codeFragment["vueUseMouse2"] }}
      </pre>
    </div>
  </div>
</template>

<script setup>
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import { useMouse } from '@/assets/js/hooks';
import { UseMouse } from './component';
import codeFragment from '../../assets/js/codeFragment';
// codeFragment-split
const { x, y, sourceType } = useMouse();
</script>
